<template>
  <div id="login">
    <img id="background-img" src="../assets/img/login-background.jpg"/>
    <form>
      <div class="user-info">
        <div>
          <select class="user-type-list" style="min-width: 100px;" v-model="action">
            <option v-for="item in loginRegister" v-bind:key="item" :value="item">{{item}}</option>
          </select>
        </div>
        <div>
          <select class="user-type-list" v-model="loginType" style="min-width: 100px">
            <option v-for="item in userType" v-bind:key="item" :value="item" :ref="'userType'+`${item}`">{{item}}</option>
          </select>
        </div>
        <div v-show="action === loginRegister[2] && loginType === userType[3]">
          <input type="text" list="lesseeIdList" placeholder="选择租户ID"/>
          <datalist id="lesseeIdList" class="user-type-list" v-model="lesseeId" style="min-width: 100px">
            <option v-for="item in lesseeIdList" v-bind:key="item" :value="item">{{item}}</option>
          </datalist>
        </div>
      </div>
      <div class="user-info">
        <label v-text="loginText"></label><input type="text" v-model:value="username"/>
      </div>
      <div class="user-info">
        <label v-text="passText"></label><input type="text" id="password" v-model="password"/>
      </div>
      <div class="user-info" v-show="action === loginRegister[1]">
        <a v-show="loginByMsg" id="send" @click="sendVerifyCode()" >发送验证码&nbsp;<span class="red-color" v-show="sent" v-text="countDown"></span></a>
        <a v-show="!loginByMsg" @click="loginByMsg = !loginByMsg">短信登陆</a>
        <a v-show="loginByMsg" @click="loginByMsg = !loginByMsg">密码登陆</a>
      </div>
      <div class="login-register" v-if="action !== loginRegister[0]">
        <button type="button" v-if="action === loginRegister[1]" @click="_login()">登陆</button>
        <button type="button" v-else-if="action === loginRegister[2]" @click="_register()">注册</button>
      </div>
      <div v-show="action === loginRegister[0]&&!isLogin" class="user-info">
        <label>请输入密码</label><input />
      </div>
      <div v-show="action === loginRegister[0]&&!isLogin" class="user-info">
        <label>请再次输入密码</label><input />
      </div>
      <div id="login-footer" v-show="action === loginRegister[0]">
        <a v-show="!isLogin" id="send" @click="sendVerifyCode()" >发送验证码&nbsp;<span class="red-color" v-show="sent" v-text="countDown"></span></a>
        <a id="find-password" @click="changeLabel()" v-text="getPassOrLogin"></a>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      //密码登陆还是短信登陆
      isLoginByPass: true,
      loginRegister: ["登陆类型",'登陆', '注册'],
      userType:["用户类型","超级管理员","租户","用户"],
      loginText:"用户名",
      loginByMsg: false,
      passText: "密码",
      getPassOrLogin: "密码找回",
      isLogin: true,
      countDown:120,
      loginType: "用户类型",
      //表示的是登陆或者注册
      action: '登陆类型',
      sent:false,
      username: '',
      password: '',
      lesseeIdList: [
        '1232323',
        '121213223',
        '6666',
        '9999',
      ],
      lesseeId: '选择租户ID',
    }
  },
  methods:{
    changeLabel() {
      if (this.isLogin) {
        this.loginText = "手机号码";
        this.passText = "验证码";
      } else {
        this.loginText = "用户名";
        this.passText = "密码";
      }
      this.isLogin = !this.isLogin;
    },
    sendVerifyCode() {
      //已经发送了
      if(this.sent){
        return;
      }
      //表示的是我们已经成功发送验证码
      this.sent = true;
      //alert("验证码已发送，请注意接收！")
      this.countDown = 120;
      const timerCountDown = setInterval(() => {
        this.countDown--;
        if (this.countDown <= 0) {
          clearInterval(timerCountDown);
        }
      }, 1000);
    },
    //在这里需要判断登陆用户的类型
    _login() {
      if (this.loginType === this.userType[1]) {
        this.$router.push("/super-center");
        //租户登陆
      } else if (this.loginType === this.userType[2]) {
        this.$router.push("/lessee-center");
        //用户登陆
      } else if (this.loginType === this.userType[3]) {
        this.$router.push("/user-center");
      } else {
        console.log("选择登陆类型")
      }
      return;


      let canLogin = false;
      if (!this.username || !this.password) {
        alert("账号密码不能为空");
        return;
      }
      myRequest.get(`username=${this.username}&password=${this.password}&loginType=${this.loginType}`, HTTP_IP_PORT + '/login/Login', true)
          .then((res) => {
            if (JSON.parse(res) === true) {
              canLogin = true;
            } else {
              alert("请核实账号和密码");
            }
            if (canLogin) {
              //登陆超级管理
              if (this.loginType === this.userType[1]) {
                this.$router.push("/super-center");
                //租户登陆
              } else if (this.loginType === this.userType[2]) {
                this.$router.push("/lessee-center");
                //用户登陆
              } else if (this.loginType === this.userType[3]) {
                this.$router.push("/user-center");
              } else {
                alert("请选择登陆用户类型");
              }
            } else {
              return;
            }
          })
    },
    _register(){
      myRequest.get(`type=${this.loginType}&username=${this.username}&password=${this.password}`,HTTP_IP_PORT+'/login/register', true)
          .then((res)=>{
            if(JSON.parse(res) === true){
              alert("注册成功");
            }else{
              alert("系统繁忙");
            }
          })
    },
  },
  watch:{
    loginByMsg: {
      deep: true,
      handler(newVal, oldVal) {
        this.changeLabel();
      }
    },
    action(){
      if (this.action === this.loginRegister[2]) {
        this.$refs['userType' + this.userType[1]][0].setAttribute("disabled", true);
      }else{
        this.$refs['userType' + this.userType[1]][0].removeAttribute("disabled");
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
#login-footer{
  font-size: 15px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-around;
  bottom: 15px;
  background-color: lightblue;
}

#background-img{
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

#login{
  /*border: #0f0f0f solid 2px;*/
  position: absolute;
  left: 35%;
  width: 30%;
  height: 30%;
  top: 35%;
  background-color: #1b6d85;
  background-image: url("https://dmoe.cc/random.php");
  font-family: "黑体";
  font-size: 20px;
}

#login>form{
  background-color: #5cb85c;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#login>form>div{
  background-color: #f6b6a3;
  height: 15%;
  margin: 3%;
}

.login-register{
  position: relative;
  width: 50%;
  display: flex;
  justify-content: space-around;
  bottom: 10px;
}

#login-register>button{
  background-color: #2e6da4;
  width: 30%;
}

.user-info{
  font-size: 16px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.user-info>*{
  margin:0 5% 0 5%;
}

.user-info>input{
  width: 50%;
}

.user-type-list{
  width: 35%;
}

#find-password{
  position: relative;
  right: 0px;
  margin: 5px;
}

#find-password:visited{
  backdrop-color: rgb(80, 76, 76);
}

#send{
  font-size: 15px;
  position: relative;
  margin: 5px;
}

#send:hover,
#find-password:hover{
  color: red;
}

.red-color{
  color:red;
}
</style>